import React, {Component} from 'react'

import Swiper from 'react-native-swiper'
import {
    View,
    Image,
    Dimensions,
    Text,
    StyleSheet,
    FlatList,
    TouchableOpacity,
    ScrollView,
    Linking,
    Clipboard
} from "react-native";
import Item from "../item/Item";

export default class TabIndex extends Component {

    todayUrl = "http://192.168.31.125:9091/api/item/coupons/page";
    tpwdUrl = "http://192.168.31.125:9091/api/tpwd/create";

    constructor() {
        super();
        this.state = {
            currentPage: 1,
            loading: true,
            itemList: [],
        }
        fetch(this.todayUrl + "?q=旗舰店&pageNo=" + this.state.currentPage, {
            method: "GET"
        }).then((response) => response.json()).then((response) => {
            console.log(response);
            if (response.results) {
                let newList = [].concat(this.state.itemList).concat(response.results);
                console.log("加载第" + this.state.currentPage + "页数据");
                this.setState({itemList: newList, loading: false});

            }
        }).catch((err) => {
            console.log("网络异常" + JSON.stringify(err));
        });
    }

    _toBoutique = () => {
        this.props.navigation.navigate('boutique', {title: "精选好货"});
    };
    _toBuy99 = () => {
        this.props.navigation.navigate('buy99', {title: "9.9元包邮"});
    };
    _toRecommendation = () => {
        this.props.navigation.navigate('recommendation', {title: "全网优选"});
    };

    render() {
        return (
            <ScrollView>
                <View style={{margin: 10}}>
                    <View style={{height: 200, marginBottom: 8}}>
                        <Swiper style={styles.wrapper} activeDotColor="#fff" autoplay={true}>
                            <View style={styles.slide1}>
                                <Text style={styles.text}>Hello Swiper</Text>
                            </View>
                            <View style={styles.slide2}>
                                <Text style={styles.text}>Beautiful</Text>
                            </View>
                            <View style={styles.slide3}>
                                <Text style={styles.text}>And simple</Text>
                            </View>
                        </Swiper>
                    </View>
                    {/*四块span*/}
                    <View style={{height: 200}}>
                        <View style={{flex: 0.5, flexDirection: 'row'}}>
                            <TouchableOpacity style={styles.SpanView} onPress={this._toBoutique}>
                                <View style={{flex: 0.6}}>
                                    <View style={{
                                        flex: 0.6,
                                        marginLeft: 10,
                                        alignItems: 'center',
                                        justifyContent: 'flex-end',
                                        paddingBottom: 10
                                    }}>
                                        <Image
                                            source={require("./image/天猫女装.png")}
                                            resizeMode="contain"
                                            style={{
                                                height: 24,
                                                width: Dimensions.get("window").width / 2 * 0.6 - 20,
                                                borderRadius: 2,
                                            }}/>
                                    </View>
                                    <View style={{flex: 0.4, marginLeft: 10}}>
                                        <Text style={{fontSize: 11, color: "#888"}}>精挑细选优质商品</Text>
                                    </View>
                                </View>
                                <View style={{flex: 0.4, justifyContent: 'center'}}>
                                    <Image
                                        source={require("./image/女装.png")}
                                        style={{
                                            height: 60,
                                            width: 60,
                                            borderRadius: 2,
                                        }}/>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.SpanView} onPress={this._toBuy99}>
                                <View style={{flex: 0.6}}>
                                    <View style={{
                                        flex: 0.6,
                                        marginLeft: 10,
                                        alignItems: 'center',
                                        justifyContent: 'flex-end',
                                        paddingBottom: 10
                                    }}>
                                        <Image
                                            source={require("./image/天猫超市.png")}
                                            resizeMode="contain"
                                            style={{
                                                height: 24,
                                                width: Dimensions.get("window").width / 2 * 0.6 - 20,
                                                borderRadius: 2,
                                            }}/>
                                    </View>
                                    <View style={{flex: 0.4, marginLeft: 10}}>
                                        <Text style={{fontSize: 11, color: "#888"}}>精挑细选优质商品</Text>
                                    </View>
                                </View>
                                <View style={{flex: 0.4, justifyContent: 'center'}}>
                                    <Image
                                        source={require("./image/女装.png")}
                                        style={{
                                            height: 60,
                                            width: 60,
                                            borderRadius: 2,
                                        }}/>
                                </View>
                            </TouchableOpacity>
                        </View>
                        <View style={{flex: 0.5, flexDirection: 'row'}}>
                            <TouchableOpacity style={styles.SpanView} onPress={this._toRecommendation}>
                                <View style={{flex: 0.6}}>
                                    <View style={{
                                        flex: 0.6,
                                        marginLeft: 10,
                                        alignItems: 'center',
                                        justifyContent: 'flex-end',
                                        paddingBottom: 10
                                    }}>
                                        <Image
                                            source={require("./image/天猫美妆.png")}
                                            resizeMode="contain"
                                            style={{
                                                height: 24,
                                                width: Dimensions.get("window").width / 2 * 0.6 - 20,
                                                borderRadius: 2,
                                            }}/>
                                    </View>
                                    <View style={{flex: 0.4, marginLeft: 10}}>
                                        <Text style={{fontSize: 11, color: "#888"}}>精挑细选优质商品</Text>
                                    </View>
                                </View>
                                <View style={{flex: 0.4, justifyContent: 'center'}}>
                                    <Image
                                        source={require("./image/女装.png")}
                                        style={{
                                            height: 60,
                                            width: 60,
                                            borderRadius: 2,
                                        }}/>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.SpanView}>
                                <View style={{flex: 0.6}}>
                                    <View style={{
                                        flex: 0.6,
                                        marginLeft: 10,
                                        alignItems: 'center',
                                        justifyContent: 'flex-end',
                                        paddingBottom: 10
                                    }}>
                                        <Image
                                            source={require("./image/天猫tmall.png")}
                                            resizeMode="contain"
                                            style={{
                                                height: 24,
                                                width: Dimensions.get("window").width / 2 * 0.6 - 20,
                                                borderRadius: 2,
                                            }}/>
                                    </View>
                                    <View style={{flex: 0.4, marginLeft: 10}}>
                                        <Text style={{fontSize: 11, color: "#888"}}>精挑细选优质商品</Text>
                                    </View>
                                </View>
                                <View style={{flex: 0.4, justifyContent: 'center'}}>
                                    <Image
                                        source={require("./image/女装.png")}
                                        style={{
                                            height: 60,
                                            width: 60,
                                            borderRadius: 2,
                                        }}/>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>

                    <View style={{
                        height: 50,
                        borderRadius: 10,
                        backgroundColor: "#f40",
                        marginTop: 10,
                    }}>
                    </View>
                </View>

                {this.getFlatlist()}
            </ScrollView>

        )
    }

    getFlatlist = () => {

        return (
            <FlatList
                // horizontal={true}
                numColumns={2}
                data={this.state.itemList}
                renderItem={({item}) =>
                    <Item itemData={item}/>
                }
                initialNumToRender={12}
                onEndReachedThreshold={0.1}

                onEndReached={(info) => this.getMoreItem()}

                ListHeaderComponent={() =>
                    <View style={{
                        height: 50,
                        marginBottom: 10,
                        backgroundColor: "#fff",
                        justifyContent: 'center',
                        alignItems: 'center'
                    }}>
                        <Text style={{color: '#f40f40'}}>全网热销 今日上新</Text>
                    </View>
                }
            />
        )
    };
    getMoreItem = () => {
        console.log("加载更多");
        // if (this.state.loading) {
        //     return
        // }
        // let page = this.state.currentPage + 1;
        // this.setState({currentPage: page});
    }

    // getMoreItem = () => {
    //     // let newItem = [
    //     //     {
    //     //         avatar: "https://img.alicdn.com/bao/uploaded/TB264NtXczfFuJjy0FhXXbxmFXa_!!412012196.jpg_360x360xzq90.jpg",
    //     //         nickname: "苹果青春版 XR",
    //     //         lastMessage: "苹果A12处理器，超强性能",
    //     //     },
    //     //     {
    //     //         avatar: "https://img.alicdn.com/imgextra/i1/2048300029/O1CN011C5JxFgzIcCSAv1_!!2048300029-0-beehive-scenes.jpg_360x360xzq90.jpg",
    //     //         nickname: "吧台",
    //     //         lastMessage: "今天读书了吗？",
    //     //     }];
    //     // let newList = [].concat(this.state.itemList).concat(newItem);
    //     console.log("已加载更多数据");
    //     // this.setState({itemList: newList});
    // }

}


const styles = StyleSheet.create({
    wrapper: {},
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5',
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9',
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    },
    SpanView: {
        flex: 0.5,
        margin: 1,
        borderRadius: 2,
        backgroundColor: "#fff",
        flexDirection: 'row'
    }
});
